<template>
  <div class="app-container">
    <el-card>
      <div class="profile-header">
        <el-avatar :src="user.avatarUrl" size="large" />
        <div class="profile-info">
          <div class="nickname">{{ user.profile?.nickname }}</div>
          <div class="username">用户名：{{ user.username }}</div>
        </div>
      </div>
      <el-descriptions title="个人信息" :column="1" border>
        <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ user.profile?.phone }}</el-descriptions-item>
        <el-descriptions-item label="角色">
          <el-tag :type="user.role === 'admin' ? 'danger' : 'success'">
            {{ user.role === 'admin' ? '管理员' : '普通用户' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="注册时间">{{ formatDate(user.createAt) }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import cloudbase from '@cloudbase/js-sdk'

const user = ref({})
const formatDate = (date) => {
  if (!date) return '-'
  const d = new Date(date.$date || date)
  return d.toLocaleString()
}

onMounted(async () => {
  const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
  if (!userInfo._id) {
    ElMessage.error('未登录')
    return
  }
  const app = cloudbase.init({ env: 'cloud1-2gozbkkk09f11d05' })
  await app.auth().signInAnonymously()
  const res = await app.callFunction({
    name: 'User',
    data: { action: 'getUserInfoForWeb', userId: userInfo._id }
  })
  if (res.result && res.result.code === 200) {
    user.value = res.result.data
  } else {
    ElMessage.error(res.result.message || '获取用户信息失败')
  }
})
</script>

<style scoped>
.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.profile-info {
  margin-left: 20px;
}
.nickname {
  font-size: 22px;
  font-weight: bold;
}
.username {
  color: #888;
  margin-top: 5px;
}
</style> 